import React, { useState } from 'react'
import { Image, Space, Radio, Upload } from 'antd';
import importImg from "../../../icon/导入.png"
import downArrow from "../../../icon/down.png"
import "./BatchInspection.css"
export default function BatchInspection() {
  const [selectDev, setSelectDev] = useState(true)
  const [inspection, setInspection] = useState(false)
  const [batch, setBatch] = useState(false)
  const changeItem = (item) => {
    if (item === 1) {
      setSelectDev(true)
      setInspection(false)
      setBatch(false)
    } else if (item === 2) {
      setSelectDev(false)
      setInspection(true)
      setBatch(false)
    } else {
      setSelectDev(false)
      setInspection(false)
      setBatch(true)
    }
  }
  return (
    <div style={{ display: "flex" }}>
      <div style={{ width: "150px" }}>
        <div style={{ padding: "40px 0" }} >
          <div style={{ padding: "0 0 15px 0" }} onClick={() => changeItem(1)}>
            <div className="diamond" style={{ backgroundColor: selectDev ? "#e0bc7f" : "#b0e0e1" }}>
              <div className="diamondl">
                <div className="rotate">1</div>
              </div>
            </div>
            <div style={{ textAlign: "center", margin: "30px 0 10px 0", fontSize: '14px', color: selectDev ? "#f59d2a" : "#008080", fontWeight: 'bold' }}>选择设备</div>
            <div style={{ textAlign: "center" }}>
              <Image src={downArrow} style={{ height: "50px" }}></Image>
            </div>
          </div>
          <div style={{ padding: "0 0 15px 0" }} onClick={() => changeItem(2)}>
            <div className="diamond" style={{ backgroundColor: inspection ? "#e0bc7f" : "#b0e0e1" }}>
              <div className="diamondl">
                <div className="rotate">2</div>
              </div>
            </div>
            <div style={{ textAlign: "center", margin: "30px 0 10px 0", fontSize: '14px', color: inspection ? "#f59d2a" : "#008080", fontWeight: 'bold' }}>查看检查项</div>
            <div style={{ textAlign: "center", }}>
              <Image src={downArrow} style={{ height: "50px" }}></Image>
            </div>
          </div>
          <div onClick={() => changeItem(3)}>
            <div className="diamond" style={{ backgroundColor: batch ? "#e0bc7f" : "#b0e0e1" }}>
              <div className="diamondl">
                <div className="rotate">3</div>
              </div>
            </div>
            <div style={{ textAlign: "center", margin: "30px 0 10px 0", fontSize: '14px', color: batch ? "#f59d2a" : "#008080", fontWeight: 'bold' }}>批量检查</div>
          </div>

        </div>


      </div>
      <div style={{
        flex: "1 1 800px", background: "#e5e6e6c7", borderRadius: "8px", minHeight: "470px", height: document.documentElement.clientHeight - 210,
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        flexDirection: "column",
        margin: "20px 0 0 0"
      }}>
        <Space style={{ width: "80%", textAlign: 'center' }} direction="vertical" size={15}>
          <div style={{ background: "#faf73442", height: '50px', lineHeight: "50px", fontSize: "14px" }}>1、选择设备---》2、设置检查项---》3、批量检查设备上存在的问题</div>
          <div style={{
            display: "flex",
            flexDirection: "column",
            alignItems: "center",

          }}>
            <div style={{ background: "white", height: '230px', width: '50%', padding: '10px 0 0 0' }} direction="vertical" size={10}>
              <Radio.Group > <Radio style={{ color: "#1FBBA9" }}>通过导入设备选择</Radio></Radio.Group>
              <div >
                <Image src={importImg} style={{ width: '120px', margin: "20px 0 0 0" }} preview={false}></Image>
              </div>
              <div style={{ color: "#1FBBA9", margin: "18px 0 0 0", fontSize: "14px" }}>导入设备</div>
              <button style={{
                float: "right", background: '#008080', margin: "10px 0 0 0",
                border: "1px solid #008080", color: 'white', borderRadius: "0px",
                width: "100px", height: '20px', fontSize: "12px"
              }}>导入日志</button>
            </div>
          </div>
          <div>
            只能上传XLS、XLSX格式的文件
          </div>
          <div>
            <button style={{
              background: '#fddac4c4',
              border: "1px solid #fddac4c4", color: '#1FBBA9', borderRadius: "0px",
              width: "150px", fontSize: "12px", padding: "5px"
            }}>模板下载</button>
          </div>
        </Space>
      </div >
    </div >
  )
}
